<template>
  <div class="home pages-box">
    <div class="header flex-center">首页</div>
    <div class="section">
      <div class="img-box">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <a :href="image.link">
              <img v-lazy="ImgDomin(image.banner)" />
            </a>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 优男靓女 -->
      <div class="module">
        <div class="head-box flex-between">
          <div class="left flex-align">
            <div class="bg-line"></div>
            <div class="title">优男靓女</div>
          </div>
          <div class="right flex-align" @click="redirect1()">
            <span>更多</span>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
        <div
          class="item"
          v-for="(item1, index1) in dataList1"
          :key="index1"
          @click="goPretty(item1)"
          style="justify-content: space-between !important;"
        >
          <div class="left">
            <div class="title">
              {{ item1.title }}
            </div>
            <div class="time-box">
              <div>发布单位：{{ item1.brandName }}</div>
              <div>发布时间：{{ item1.createTime }}</div>
            </div>
          </div>
          <div class="right">
            <img v-lazy="ImgDomin(item1.banner)" alt="" />
<!--            <div class="dianzan flex-between">-->
<!--              <div class="flex-align">-->
<!--                <i class="iconfont icon-yanjing"></i>-->
<!--                {{ item1.viewNum || 0 }}-->
<!--              </div>-->
<!--              <div class="flex-align">-->
<!--                <i class="iconfont icon-dianzan"></i>-->
<!--                {{ item1.praiseNum || 0 }}-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </div>
      </div>
      <!-- 精彩花絮 -->
      <div class="module">
        <div class="head-box flex-between">
          <div class="left flex-align">
            <div class="bg-line"></div>
            <div class="title">精彩花絮</div>
          </div>
          <div class="right flex-align" @click="redirect2()">
            <span>更多</span>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
        <div
          class="item"
          v-for="(item2, index2) in dataList2"
          :key="index2"
          @click="goGags(item2)"
        >
          <div class="left">
            <div class="title multipe">
              {{ item2.title }}
            </div>
            <div class="time-box">
              <div>发布单位：{{ item2.brandName || "--" }}</div>
              <div>发布时间：{{ item2.createTime }}</div>
            </div>
          </div>
          <div class="right">
            <img v-lazy="ImgDomin(item2.coverImg)" alt="" />
<!--            <div class="dianzan flex-between">-->
<!--              <div class="flex-align">-->
<!--                <i class="iconfont icon-yanjing"></i>-->
<!--                {{ item2.browseNum || 0 }}-->
<!--              </div>-->
<!--              <div class="flex-align">-->
<!--                <i class="iconfont icon-dianzan"></i>-->
<!--                {{ item2.praiseNum || 0 }}-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </div>
      </div>
      <!-- 活动报名 -->
      <div class="module">
        <div class="head-box flex-between">
          <div class="left flex-align">
            <div class="bg-line"></div>
            <div class="title">活动报名</div>
          </div>
          <div class="right flex-align" @click="redirect3()">
            <span>更多</span>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
        <div
          class="item"
          style="justify-content: space-between;"
          v-for="(item3, index3) in dataList3"
          :key="index3"
          @click="goActivity(item3)"
        >
          <div class="left">
            <div class="title multipe">
              {{ item3.activityTitle }}
            </div>
            <div class="time-box">
              <div>发布单位：{{ item3.brandName || "--" }}</div>
              <div>发布时间：{{ item3.createTime }}</div>
            </div>
          </div>
          <div class="right">
            <img v-lazy="ImgDomin(item3.coverImg)" alt="" />
<!--            <div class="dianzan flex-between">-->
<!--              <div class="flex-align">-->
<!--                <i class="iconfont icon-yanjing"></i>-->
<!--                {{ item3.browseNum || 0 }}-->
<!--              </div>-->
<!--              <div class="flex-align">-->
<!--                <i class="iconfont icon-dianzan"></i>-->
<!--                {{ item3.praiseNum || 0 }}-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </div>
      </div>
      <!-- 组织联谊 -->
      <div class="module">
        <div class="head-box flex-between">
          <div class="left flex-align">
            <div class="bg-line"></div>
            <div class="title">组织联谊</div>
          </div>
          <div class="right flex-align" @click="redirect4()">
            <span>更多</span>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
        <div
          class="item"
          v-for="(item4, index4) in dataList4"
          :key="index4"
          @click="goFellowship(item4.id)"
        >
          <div class="left">
            <div class="title multipe">
              {{ item4.title }}
            </div>
            <div class="time-box">
              <div>发布单位：{{ item4.organization }}</div>
              <div>发布时间：{{ item4.createTime }}</div>
            </div>
          </div>
          <div class="right">
            <img v-lazy="ImgDomin(item4.coverImg)" alt="" />
            <!-- <div class="dianzan flex-between">
              <div class="flex-align">
                <i class="iconfont icon-yanjing"></i>

              </div>
              <div class="flex-align">
                <i class="iconfont icon-dianzan"></i>

              </div>
            </div> -->
          </div>
        </div>
      </div>
      <!-- 总首页的交友品牌 -->
      <div class="module module0">
        <div class="head-box flex-between">
          <div class="left flex-align">
            <div class="bg-line"></div>
            <div class="title">交友品牌</div>
          </div>
          <div class="right flex-align" @click="redirect5()">
            <span>查看更多</span>
            <i class="iconfont icon-jinrujiantou"></i>
          </div>
        </div>
        <div class="item-box">
          <div
            class="item"
            v-for="(item5, index5) in dataList5"
            :key="index5"
            @click="goBrandHome(item5.id)"
          >
            <img class="img" v-lazy="ImgDomin(item5.logoImg)" alt="" />
            <div class="item-title">{{ item5.brandName }}</div>
          </div>
        </div>
      </div>
      <loading-cover ref="loadingCover"></loading-cover>
    </div>
    <footerNav></footerNav>
  </div>
</template>

<script>
import footerNav from "@/components/footerNav";
import { getSwiperList, getPrettyManGirl } from "@/api/pretty";
import { getfsNewslist, getActivitylist } from "@/api/activity";
import { getGroup } from "@/api/fellowship";
import { getBrandList } from "@/api/brand";
export default {
  name: "Home",
  components: {
    footerNav,
  },
  data() {
    return {
      list: [
        {
          title: "名称",
        },
        {
          title: "名称",
        },
        {
          title: "名称",
        },
        {
          title: "名称",
        },
      ],
      images: [],
      dataList1: [], //优男靓女列表
      dataList2: [], //花絮列表
      dataList3: [], //活动报名列表
      dataList4: [], //组织联谊列表
      dataList5: [], //交友品牌列表
    };
  },
  created() {
    this.getSwiper();
    this.getList1();
    this.getList2();
    this.getList3();
    this.getList4();
    this.getList5();
  },
  methods: {
    // 获取轮播图
    getSwiper() {
      getSwiperList({
        current: 1,
        size: 5,
      }).then((res) => {
        if (res.code == 0) {
          this.images = res.data;
        }
      });
    },
    // 获取优男靓女列表
    getList1() {
      getPrettyManGirl({
        pageNo: 1,
        pageSize: 2,
      }).then((res) => {
        console.log(res,"dataList1");
        if (res.code === 0) {
          this.dataList1 = res.data.records;
        }
      });
    },
    // 获取花絮列表
    getList2() {
      getfsNewslist({
        pageNo: 1,
        pageSize: 2,
      }).then((res) => {
        console.log(res,"dataList2");
        if (res.code === 0) {
          this.dataList2 = res.data.records;
        }
      });
    },
    // 获取活动报名列表
    getList3() {
      getActivitylist({
        current: 1,
        size: 2,
      }).then((res) => {
        console.log(res,"dataList3");
        if (res.code === 0) {
          this.dataList3 = res.data.records;
        }
      });
    },
    // 获取组织联谊列表
    getList4() {
      getGroup({
        current: 1,
        size: 2,
      }).then((res) => {
        if (res.code == 0) {
          this.dataList4 = res.data.records;
        }
      });
    },
    // 获取品牌列表
    getList5() {
      getBrandList({
        current: 1,
        size: 8,
      })
        .then((res) => {
          if (res.code == 0) {
            console.log(res,"555");
            this.dataList5 = res.data.records;
          }
          // if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        })
        .catch((err) => {
          // if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        });
    },
    redirect1() {
      this.$router.push({ name: "PrettyManGirlList" });
    },
    redirect2() {
      this.$router.push({ name: "GagsList" });
    },
    redirect3() {
      this.$router.push({ name: "ActivityMore" });
    },
    redirect4() {
      this.$router.push({ name: "OrganizeFellowship" });
    },
    redirect5() {
      this.$router.push({ name: "BrandMore" });
    },
    goPretty(item) {
      this.$router.push({ name: "PrettyManGirl",
        query: {
        id: item.id ,brandId: item.brandId
      } });
    },
    // 进入花絮详情
    goGags(item) {
      this.$router.push({
        name: "GagsDetail",
        query: {
        id: item.id,brandId:item.author
      } });
    },
    // 进入活动详情
    goActivity(item) {
      this.$router.push({
        name: "ActivityDetail",
        query: {
        id: item.id, type: 2 ,brandId:item.brandId
      } });
    },
    // 进入联谊详情
    goFellowship(id) {
      this.$router.push({ name: "FellowshipDetail", query: { id: id } });
    },
    // 进入品牌首页
    goBrandHome(id) {
      this.$router.push({ name: "BrandHome", query: { id: id } });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/css/home.less");
</style>
